<template>
  <div class="c-selectBoxInput">
      <div class="selectBoxInput" :class="{'selectBoxInput_fail':!pass}">
           <input type="number" class="selectBoxInput-input" v-model="value" v-if="inputType === 'number'">
           <input type="text" class="selectBoxInput-input" v-model="value" v-if="inputType === 'text'">
           <span class="selectBoxInput-text">
             <template v-if="inputType === 'number'">
                范围: {{min}}.00-{{max}}.00
             </template>
              <template v-if="inputType === 'text'">
                  {{text}}
              </template>
           </span>
      </div>
  </div>
</template>
<script>
    export default {
        props: {
          title:{
            type:String,
            default:""
          },
          min:{
            type:Number,
            default:0
          },
          max:{
            type:Number,
            dafault:999999
          },
          index:{
            type:Number,
            default:0,
          },
          required:{
            type:Boolean,
            default:true
          },
          inputType:{
            type:String,
            default:'number'
          },
          text:{
            type:String,
            default:null,
          }
        },
        data() {
            return {
              value:this.required && this.inputType === 'number'?this.min:"",
              pass:true
            }
        },
        methods: {
          vaild(){
              let juge = true;
              if(this.inputType === 'number'){
                juge = this.value >= this.min && this.value <= this.max
              }
              if(this.inputType === 'text'){
                juge = this.value!== "";
              }
              return juge
          }
        },
        components: {},
        mounted() {
        },
        created() {

        },
        mounted(){
          if(this.required)this.pass=this.vaild();
          this.$emit("change",{
            val:this.value,
            title:this.title,
            index:this.index
          })
        },
        activated(){

        },
        watch:{
          value(){
             this.pass = this.vaild();
             this.$emit("change",{
               val:this.value,
               title:this.title,
               index:this.index
             })
          }
        }
    }
</script>
<style lang="less">
  .c-selectBoxInput{
    .selectBoxInput{

      &-title{
        padding: 0 5px;
        display: inline-block;
      }
      &-input{
        background: rgba(247,247,247,1);
        border: 1px solid #ddd;
        border-radius: 5px;
        text-indent: 10px;
      }
      &-text{
        color: #ccc;
        letter-spacing: 1px;
        padding: 0 10px;
      }

      &_fail{
        .selectBoxInput-input{
          border: 1px solid #9e2828;
        }
      }
    }
  }
</style>
